<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <style>
	        .in,.in_active{
				 display: none;
				 width: 600px;
				 height: 100px;
				 background: white;
				 border: 1px solid black;
				 font-size: 50px;
				 line-height: 100px;
				 text-align: center;
				}
				/*in_active为选项卡选中状态，选中后显示*/
				.in_active{
				 display: block;
				 margin-left: -100px;
				}
				/*con为按钮普通状态，默认文字颜色为黑色*/
				.con,.con_active{
				display: inline-block;
				text-decoration: none;
				width: 150px;
				height: 30px;
				border-radius: 20px;
				text-align: center;
				line-height: 30px;
				 color: gray;
				 background-color: black;
				}
				/*con_active为按钮选中状态，选中后文字颜色为白色*/
				.con_active{
				 color: white; 
				}
	    </style>
	</head>
	<body>
		<div class="box" id="box">
			
			 <nav class="conList">
				  <a class="con_active" href="javascript:;">第一个控制按钮</a>
				  <a class="con" href="javascript:;">第二个控制按钮</a>
				  <a class="con" href="javascript:;">第三个控制按钮</a>
			 </nav> 
			 <ul class="list">
				  <li class="in_active">第一张选项卡</li>
				  <li class="in">第二张选项卡</li>
				  <li class="in">第三张选项卡</li>
			 </ul>
		</div>
	</body>
	<script>
		function Tab(obj){
			 /*元素获取*/
			 //获取选项卡展示部分
			 this.oList = obj.getElementsByTagName('ul')[0];
			 this.aIn = this.oList.getElementsByTagName('li');
			 //获取选项卡控制部分
			 this.oConList = obj.getElementsByTagName('nav')[0];
			 this.aCon = this.oConList.getElementsByTagName('a');
			 /*变量设置*/
			 //选项卡张数
			 this.count = this.aIn.length;
			 //当前第几张
			 this.cur = 0;
			 var _this = this;
			 
			 for(var i = 0; i < this.count; i++){
			  //设置索引
			  this.aCon[i].index = i;
			  //给按钮添加事件
			  this.aCon[i].onclick = function(){
			   _this.cur = this.index;
			   _this.switch();
			  }
			 }
			}
			Tab.prototype.switch = function(){
			 //去掉所有
			 for(var i = 0; i < this.count; i++){
			  this.aIn[i].className = 'in';
			  this.aCon[i].className = 'con';
			 }
			 //显示当前
			 this.aIn[this.cur].className = 'in_active';
			 this.aCon[this.cur].className = 'con_active'; 
			}
			//获取选项卡元素
			var oBox = document.getElementById('box');
			//构造选项卡对象
			var tab1 = new Tab(oBox);
	</script>
</html>
